<!-- vuedraggable -->
<template>
  <div class="flex-sb" style="height: 96%">
    <div class="boxLeft">
      <div
        :gutter="12"
        class="leftWrap"
        v-for="moduleItem in moduleVO"
        :key="moduleItem.moduleType"
      >
        <div class="leftText">
          {{ moduleItem.moduleTypeName }}
        </div>

        <div class="leftTempaletWrap">
          <div
            :span="12"
            class="leftTempalet"
            v-for="(item, itemIndex) in moduleItem.children"
            :key="itemIndex"
            @click="clickTempalet(item)"
          >
            <div class="flex-ac">
              <img
                class="leftIcon"
                :src="'/img/payment/' + item.moduleAttribute + '.png'"
              />
              <div>{{ item.moduleAttributeName }}</div>
            </div>
            <div>({{ item.moduleExistNum }}/{{ item.moduleMax }})</div>
            <!-- <div class="leftLable">{{ item.moduleAttributeName }}</div>
            <div class="leftNumber">
              ({{ item.moduleExistNum }}/{{ item.moduleMax }})
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="boxConten">
      <div class="conten-box">
        <div class="navTop">
          <i
            class="el-icon-arrow-left"
            style="font-size: 18px; cursor: pointer"
            @click="goBack"
            >缴费</i
          >
          <!-- <el-button
            v-if="formDefinedVO.length"
            @click="submit"
            type="success"
            size="mini"
            round
            :disabled="disabledBtn"
            >缴费单 保存</el-button
          > -->
        </div>
        <div class="conten-footer">
          <draggable
            v-model="formDefinedVO"
            chosenClass="chosen"
            forceFallback="true"
            group="people"
            animation="1000"
          >
            <transition-group>
              <div
                :class="[
                  'item',
                  selectActive == item.timeStamp ? 'selectActive' : '',
                ]"
                v-for="(item, index) in formDefinedVO"
                :key="item.timeStamp"
                @click="clickDraggable(item, index)"
              >
                <i
                  @click.stop="delIcon(index, item)"
                  v-if="selectActive == item.timeStamp"
                  :class="[
                    'el-icon-error',
                    selectActive == item.timeStamp ? 'selectClose' : '',
                  ]"
                ></i>

                <div class="xieYiBox" v-if="item.moduleAttribute === 5">
                  <!-- 协议 -->
                  <div class="radioIcon"></div>
                  <div>同意《{{ item.moduleKey || "协议信息" }}》</div>
                </div>
                <div class="item-tem" v-else>
                  <div class="item-lab">{{ moduleKeyShow(item) }}</div>
                  <div class="item-tip">
                    {{
                      item.moduleTips ||
                      "请输入" + item.moduleAttributeName + "提示语句"
                    }}
                  </div>
                  <!-- <div class="item-lab">{{ item.moduleKey }}</div>
                  <div class="item-tip">{{ item.moduleTips }}</div> -->
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>

        <div class="conten-footer-btn" v-if="formDefinedVO.length">
          <el-button type="primary" size="small" style="width:80%;" round :disabled="disabledBtn" @click="submit">缴费单 保存</el-button>
        </div>
      </div>
    </div>

    <div class="boxRight">
      <div class="boxRightTop" v-if="selectIndex !== -1">
        <div class="rightTopTit">
          <div>{{ rightLable(rightForm) }}</div>
          <el-button type="primary" size="small" @click="setSubmit(rightForm)"
            >配置保存</el-button
          >
        </div>
      </div>
      <div class="rightTopForm" v-if="selectIndex !== -1">
        <div class="getTips">{{getTips(rightForm)}}</div>

        <el-form
          :model="rightForm"
          ref="formDefinedVOItem"
          :show-message="false"
          :label-position="formConfig.labelPosition"
          :size="formConfig.size"
          class="demo-ruleForm"
        >
          <el-form-item required :label="rightForm.moduleAttributeName + '名称'">
            <el-input
              v-model="rightForm.moduleKey"
              :placeholder="'请输入' + rightForm.moduleAttributeName + '名称'"
            ></el-input>
          </el-form-item>
          <el-form-item required label="提示语句" v-if="tipsShow(rightForm)">
            <el-input
              v-model="rightForm.moduleTips"
              :placeholder="
                '请输入' + rightForm.moduleAttributeName + '提示语句'
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="是否必填" v-if="tipsShow(rightForm)">
            <el-radio-group v-model="rightForm.isRequired">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="字段类型" v-if="rightForm.moduleAttribute === 2">
            <el-select v-model="rightForm.textType" placeholder="字段类型">
              <el-option
                :label="textTypeItem.dictValue"
                :value="textTypeItem.dictKey"
                v-for="textTypeItem in textType"
                :key="textTypeItem.id"
              ></el-option>
            </el-select>
          </el-form-item>

          
          <!-- 文本默认值 -->
          <el-form-item label="默认值" v-if="rightForm.moduleAttribute === 2">
            <el-input v-model="rightForm.moduleValue" :placeholder="'请输入默认值'"></el-input>
          </el-form-item>
            

          <el-form-item label="字段类型" v-if="rightForm.moduleAttribute === 4">
            <el-radio-group v-model="rightForm.dateType">
              <el-radio :label="0">年/月/日</el-radio>
              <el-radio :label="1">年/月</el-radio>
              <el-radio :label="2">年</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 单选多选组件 -->
          <el-form-item
            required
            label="选项列表"
            v-if="
              rightForm.moduleAttribute === 0 || rightForm.moduleAttribute === 1
            "
          >
            <div
              v-for="(optionItem, index) in rightForm.moduleOption"
              :key="index"
            >
              <div class="optionItem">
                <i
                  @click.stop="
                    delOption(
                      rightForm.moduleOption,
                      index,
                      rightForm,
                      optionItem.opValue
                    )
                  "
                  v-if="rightForm.moduleOption.length !== 1"
                  class="el-icon-error optionItemIcon"
                ></i>
                <div class="optionItemTop">
                  <div class="optionItemIndex">{{ index + 1 }}</div>
                  <div>选项</div>
                </div>
                <el-input
                  v-model="optionItem.opKey"
                  @input="optionItemChange(index, optionItem)"
                  placeholder="请输入选项名称"
                ></el-input>
              </div>
            </div>
            <div
              class="flex-jc"
              style="width: 100%; margin-top: 20px"
              v-if="rightForm.moduleOption.length < 10"
            >
              <el-button
                @click="optionAdd(rightForm.moduleOption)"
                icon="el-icon-plus"
                type="primary"
                size="small"
                plain
                >增加选项</el-button
              >
            </div>
          </el-form-item>
          <!-- 单选默认值 -->
          <el-form-item
            :label="rightForm.moduleAttributeName + '默认值'"
            v-if="rightForm.moduleAttribute === 0"
          >
            <el-select
              v-model="rightForm.moduleValue"
              placeholder="请选择默认值"
              clearable
            >
              <el-option
                :label="optionItem.opKey"
                :value="optionItem.opValue"
                v-for="(optionItem, index) in rightForm.moduleOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 多选默认值 -->
          <el-form-item
            :label="rightForm.moduleAttributeName + '默认值'"
            v-if="rightForm.moduleAttribute === 1"
          >
            <el-select
              v-model="rightForm.moduleValueCh"
              placeholder="请选择默认值"
              clearable
              multiple
              @change="checkboxChange(rightForm)"
            >
              <el-option
                :label="optionItem.opKey"
                :value="optionItem.opValue"
                v-for="(optionItem, index) in rightForm.moduleOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 金额组件 -->
          <el-form-item
            required
            label="选项信息"
            v-if="
              rightForm.moduleAttribute === 7 ||
              rightForm.moduleAttribute === 8 ||
              rightForm.moduleAttribute === 9
            "
          >
            <div
              v-for="(optionItem, index) in rightForm.moduleOption"
              :key="index"
            >
              <div class="optionItem">
                <i
                  @click.stop="delOptionMoney(rightForm.moduleOption, index)"
                  v-if="rightForm.moduleOption.length !== 1"
                  class="el-icon-error optionItemIcon"
                ></i>
                <div class="moenyItem">
                  <div class="moenyItemLeft">{{ optionItem.opValue }}</div>
                  <div class="moenyItemRight">
                    <div class="itemRightBox" style="margin-bottom: 10px">
                      <div class="itemName">选项</div>
                      <el-input
                        v-model="optionItem.opKey"
                        placeholder="请输入选项名称"
                      ></el-input>
                    </div>
                    <div class="itemRightBox">
                      <div class="itemName">金额值</div>
                      <el-input-number
                        v-model="optionItem.opValue"
                        placeholder="请输入金额值"
                        :controls="false"
                        size="mini"
                        :precision="2"
                        :step="0.01"
                        :min="0"
                        :max="999999"
                      ></el-input-number>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="flex-jc"
              style="width: 100%; margin-top: 20px"
              v-if="rightForm.moduleOption.length < 10"
            >
              <el-button
                @click="optionAdd(rightForm.moduleOption)"
                icon="el-icon-plus"
                type="primary"
                size="small"
                plain
                >增加选项</el-button
              >
            </div>
          </el-form-item>

          <el-form-item
            required
            label="内容编辑"
            v-if="
              rightForm.moduleAttribute === 3 || rightForm.moduleAttribute === 5
            "
          >
            <avue-ueditor
              v-model="rightForm.moduleValue"
              :options="options"
            ></avue-ueditor>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//导入draggable组件
import draggable from "vuedraggable";
import { apiTemplate, saveForm } from "@/api/rb-merchant/feetMer/payment";
import { getDictionary } from "@/api/system/dict";

export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      disabledBtn: false,
      formConfig: {
        size: "mini",
        labelPosition: "top", //标签位置 left,top,right
      }, //右侧表单配置
      moduleVO: [], //左侧表单项
      formDefinedVO: [], //右侧表单项,被拖拽对象的数组
      // formDefinedVO:[],//中间显示组件，被拖拽对象的数组
      selectActive: "",
      selectIndex: -1,
      data: {
        formCode: "",
        formName: "",
        rpiName: "",
        rpiNo: "",
      },
      options: {
        //普通上传地址
        action: "/api/blade-resource/oss/endpoint/put-file",
        customConfig: {}, //wangEditor编辑的配置
        props: {
          // home: '',
          res: "data",
          url: "link",
        },
      },
      textType: [],
      rightForm: {},
    };
  },
  computed: {
    rightLable() {
      return (item) => {
        if (item.moduleAttributeName) {
          return item.moduleAttributeName + "配置";
        } else {
          return "";
        }
      };
    },
    moduleKeyShow() {
      return (item) => {
        if (item.moduleKey) {
          return item.moduleKey;
        } else {
          switch (item.moduleAttribute) {
            //组件属性(0单选 1多选 2文本输入 3文案 4日期 5协议组件, 6标准金额
            //  7固定金额 8单选金额 9多选金额)
            case 0:
              return item.moduleAttributeName + "名称";
              // param.moduleKey = item.moduleAttributeName + "名称"; //标签lable
              // param.moduleTips = "请选择"; //提示语句
              break;
            case 1:
              return item.moduleAttributeName + "名称"; //标签lable
              // param.moduleKey = item.moduleAttributeName + "名称"; //标签lable
              // param.moduleTips = "请选择"; //提示语句
              break;
            case 2:
              return item.moduleAttributeName + "名称"; //标签lable
              // param.moduleKey = item.moduleAttributeName + "名称"; //标签lable
              // param.moduleTips = "请输入"; //提示语句
              break;
            case 3:
              return item.moduleAttributeName + "名称"; //标签lable
              // param.moduleKey = item.moduleAttributeName + "名称"; //标签lable
              // param.moduleTips = "请输入"; //提示语句
              break;
            case 4:
              return "请选择日期"; //标签lable
              // param.moduleKey = "请选择日期"; //标签lable
              // param.moduleTips = "请选择"; //提示语句
              break;
            case 5:
              return "协议信息"; //标签lable
              // param.moduleKey = "协议信息"; //标签lable
              break;
            case 6:
              return "缴费金额"; //标签lable
              // param.moduleKey = "缴费金额"; //标签lable
              // param.moduleTips = "请输入"; //提示语句
              break;
            case 7:
              return "缴费金额"; //标签lable
              // param.moduleKey = "缴费金额"; //标签lable
              // param.moduleTips = "请输入"; //提示语句
              break;
            case 8:
              return "单选金额"; //标签lable
              // param.moduleKey = "单选金额"; //标签lable
              // param.moduleTips = "请输入"; //提示语句
              break;
            case 9:
              return "多选金额"; //标签lable
              // param.moduleKey = "多选金额"; //标签lable
              // param.moduleTips = "请输入"; //提示语句
              break;
          }
        }
      };
    },
    tipsShow() {
      return (item) => {
        if (item.moduleAttribute === 3 || item.moduleAttribute === 5) {
          return false;
        } else {
          return true;
        }
      };
    },
    getTips(){
      return (item)=>{
        switch (item.moduleAttribute) {
          //组件属性(0单选 1多选 2文本输入 3文案 4日期 5协议组件, 6标准金额
          //  7固定金额 8单选金额 9多选金额)
          case 0:
            return "单项选择配置用户选择对应选项";
            break;
          case 1:
            return "多项选择配置用户选择多个选项"; //标签lable
            break;
          case 2:
            return "自定义用户文本输入信息"; //标签lable
            break;
          case 3:
            return "通过文案风格自定义设计内容"; //标签lable
            break;
          case 4:
            return "自定义选择相应日期。支持 年/年月/年月日"; //标签lable
            break;
          case 5:
            return "自定义设计规范协议"; //标签lable
            break;
          case 6:
            return "用户手工输入金额，无需配置参数"; //标签lable
            break;
          case 7:
            return "设置多种固定金额模板，用户无需设置参数"; //标签lable
            break;
          case 8:
            return "用户选择对应选项，自动带出金额"; //标签lable
            break;
          case 9:
            return "用户选择对应选项，付款金额为每个选项金额之和"; //标签lable
            break;
          default: 
            return ''
        }
      }
    }
  },
  created() {
    this.doGetDicts();

    if (this.$route.query.formCode) {
      this.getTemplate();
    }
  },
  methods: {
    /**@fun 保存 */
    submit() {
      // for (let index = 0; index < this.formDefinedVO.length; index++) {
      //   const element = array[index];
      // }
      let indexLen = 1;
      let itemBool = this.formDefinedVO.every(function (item,index) {
        indexLen = index+1;
        if (item.moduleAttribute === 0 || item.moduleAttribute === 1) {
          // 0单选 1多选
          if (!item.moduleKey) {
            return false;
          } else if (!item.moduleTips) {
            return false;
          } else if (item.moduleOption.length > 0) {
            let isbool = item.moduleOption.every((optionItem) => {
              return optionItem.opKey;
            });
            if (isbool) {
              return true;
            } else {
              return false;
            }
          }
        } else if (
          item.moduleAttribute === 2 ||
          item.moduleAttribute === 4 ||
          item.moduleAttribute === 6
        ) {
          // 2文本输入 4日期 6标准金额
          if (!item.moduleKey) {
            return false;
          } else if (!item.moduleTips) {
            return false;
          } else {
            return true;
          }
        } else if (item.moduleAttribute === 3 || item.moduleAttribute === 5) {
          // 3文案 5协议组件
          if (!item.moduleKey) {
            return false;
          } else if (!item.moduleValue) {
            return false;
          } else if (item.moduleValue=="<p><br></p>") {
            item.moduleValue = "";
            return false;
          } else {
            return true;
          }
        } else {
          // 7固定金额 8单选金额 9多选金额
          if (!item.moduleKey) {
            return false;
          } else if (!item.moduleTips) {
            return false;
          } else if (item.moduleOption.length > 0) {
            let isbool = item.moduleOption.every((optionItem) => {
              return optionItem.opKey;
            });
            if (isbool) {
              return true;
            } else {
              return false;
            }
          }
        }
      });

      if (itemBool) {
        let param = {
          formCode: this.data.formCode,
          formDefinedVO: this.formDefinedVO,
        };
        let that = this;
        that.disabledBtn = true;
        saveForm(param).then(
          (res) => {
            this.$message({ type: "success", message: res.data.msg });
            that.disabledBtn = false;
            // that.goBack();
          },
          (error) => {
            that.disabledBtn = false;
          }
        );
      }else{
        this.$message({ type: "error", message: '请检查第'+indexLen+'个数据内容！' });
      }
    },
    /* 配置保存 */
    setSubmit(item) {
      // moduleAttribute	组件属性
      // (0单选 1多选 2文本输入 3文案 4日期 5协议组件, 6标准金额 7固定金额 8单选金额 9多选金额)	integer
      if (item.moduleAttribute === 0 || item.moduleAttribute === 1) {
        // 0单选 1多选
        if (!item.moduleKey) {
          this.$message({
            type: "error",
            message: item.moduleAttributeName + "名称不能为空",
          });
          return false;
        } else if (!item.moduleTips) {
          this.$message({
            type: "error",
            message: item.moduleAttributeName + "提示语句不能为空",
          });
          return false;
        } else if (item.moduleOption.length > 0) {
          let isbool = item.moduleOption.every((optionItem) => {
            return optionItem.opKey;
          });
          if (isbool) {
            this.formDefinedVO[this.selectIndex] = JSON.parse(
              JSON.stringify(item)
            );
            this.$message({
              type: "success",
              message: item.moduleAttributeName + "配置保存成功",
            });
            this.$forceUpdate();
          } else {
            this.$message({
              type: "error",
              message: item.moduleAttributeName + "选项列表的选项名称不能为空",
            });
          }
        }
      } else if (
        item.moduleAttribute === 2 ||
        item.moduleAttribute === 4 ||
        item.moduleAttribute === 6
      ) {
        // 2文本输入 4日期 6标准金额
        if (!item.moduleKey) {
          this.$message({
            type: "error",
            message: item.moduleAttributeName + "名称不能为空",
          });
          return false;
        } else if (!item.moduleTips) {
          this.$message({
            type: "error",
            message: item.moduleAttributeName + "提示语句不能为空",
          });
          return false;
        } else {
          this.formDefinedVO[this.selectIndex] = JSON.parse(
            JSON.stringify(item)
          );
          this.$message({
            type: "success",
            message: item.moduleAttributeName + "配置保存成功",
          });
          this.$forceUpdate();
        }
      } else if (item.moduleAttribute === 3 || item.moduleAttribute === 5) {
        // 3文案 5协议组件
        if (!item.moduleKey) {
          this.$message({
            type: "error",
            message: item.moduleAttributeName + "名称不能为空",
          });
          return false;
        } else if (!item.moduleValue) {
          this.$message({
            type: "error",
            message: item.moduleAttributeName + "内容不能为空",
          });
          return false;
        } else if (item.moduleValue=="<p><br></p>") {
            item.moduleValue = "";
            return false;
        } else {
          this.formDefinedVO[this.selectIndex] = JSON.parse(
            JSON.stringify(item)
          );
          this.$message({
            type: "success",
            message: item.moduleAttributeName + "配置保存成功",
          });
          this.$forceUpdate();
        }
      } else {
        // 7固定金额 8单选金额 9多选金额
        if (!item.moduleKey) {
          this.$message({
            type: "error",
            message: item.moduleAttributeName + "名称不能为空",
          });
          return false;
        } else if (!item.moduleTips) {
          this.$message({
            type: "error",
            message: item.moduleAttributeName + "提示语句不能为空",
          });
          return false;
        } else if (item.moduleOption.length > 0) {
          let isbool = item.moduleOption.every((optionItem) => {
            return optionItem.opKey;
          });
          if (isbool) {
            this.formDefinedVO[this.selectIndex] = JSON.parse(
              JSON.stringify(item)
            );
            this.$message({
              type: "success",
              message: item.moduleAttributeName + "配置保存成功",
            });
            this.$forceUpdate();
          } else {
            this.$message({
              type: "error",
              message: item.moduleAttributeName + "选项信息项不能为空",
            });
          }
        }
      }
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: "feet_text_type" }).then((res) => {
        this.textType = res.data.data;
      });
    },
    /**@fun 设置选项名称--单选多选 */
    optionItemChange(val, item) {
      item.opValue = val;
    },
    /**@fun 删除---选项单选 */
    delOption(arr, index, item, opValue) {
      arr.splice(index, 1);
      if (item.moduleAttribute === 0) {
        // 单选
        let len = arr.findIndex((obj) => obj.opValue === item.moduleValue);
        if (len == -1) {
          item.moduleValue = "";
        }
      } else {
        // 多选
        let len = item.moduleValueCh.findIndex((obj) => obj === opValue + "");
        if (len != -1) {
          item.moduleValueCh.splice(len, 1);
          item.moduleValue = item.moduleValueCh.join(",");
          this.$forceUpdate();
        }
      }
    },
    /**@fun 多选默认值变化 */
    checkboxChange(item) {
      if (item.moduleValueCh.length != 0) {
        item.moduleValue = item.moduleValueCh.join(",");
      } else {
        item.moduleValue = "";
      }

      this.$forceUpdate();
    },
    /**@fun 删除---单选多选金额 */
    delOptionMoney(arr, index) {
      arr.splice(index, 1);
    },
    /**@fun 添加---选项单选多选 */
    optionAdd(arr) {
      arr.push({ opKey: "", opValue: "" });
    },
    /**@fun 关闭当前页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.push({ path: "/rb-merchant/feetMer/payment" });
    },
    /**@fun 删除中间组件 */
    delIcon(index, item) {
      this.formDefinedVO.splice(index, 1);
      let len = this.moduleVO[item.moduleType].children.findIndex(
        (obj) => obj.moduleAttribute === item.moduleAttribute
      );
      if (len != -1) {
        if (this.moduleVO[item.moduleType].children[len].moduleExistNum !== 0) {
          this.moduleVO[item.moduleType].children[len].moduleExistNum--;
        }
        this.selectIndex = -1;
      }
    },
    /**@fun 点击中间组件 */
    clickDraggable(item, index) {
      if (this.selectActive != item.timeStamp) {
        this.selectActive = item.timeStamp;
        this.selectIndex = index;
        if (item.moduleAttribute === 1) {
          //点击最近多选框
          if (item.moduleValue) {
            item.moduleValueCh = item.moduleValue.split(",");
          }
        }

        this.rightForm = JSON.parse(JSON.stringify(item));
      }
    },
    /**@fun 点击左侧组件 */
    clickTempalet(item) {
      // moduleAttribute	组件属性
      // (0单选 1多选 2文本输入 3文案 4日期 5协议组件, 6标准金额 7固定金额 8单选金额 9多选金额)	integer
      // moduleAttributeName	组件属性名称	string

      // moduleType	组件类型(0基础组件 1金额组件)	integer
      // moduleTypeName	组件类型名称

      if (item.moduleExistNum < item.moduleMax) {
        item.moduleExistNum++;
        let param = {
          timeStamp: +new Date() + "",
          moduleAttributeName: item.moduleAttributeName,
          moduleType: item.moduleType,
          moduleTypeName: item.moduleTypeName,
          dateType: 0, //日期组件类型(0年月日 1年月 2年)
          isRequired: 0, //是否必填(0否 1是)
          moduleAttribute: item.moduleAttribute,
          moduleCode: item.moduleCode, //组件编号
          moduleOption: [], //选项内容 opKey opValue
          moduleType: item.moduleType,
          moduleValue: "", //富文本输入值
          moduleKey: "",
          moduleTips: "",
          textType: "0", //文本字段类型
          moduleValueCh: [], //多选默认值
        };

        if (
          item.moduleAttribute === 0 ||
          item.moduleAttribute === 1 ||
          item.moduleAttribute === 6 ||
          item.moduleAttribute === 7 ||
          item.moduleAttribute === 8 ||
          item.moduleAttribute === 9
        ) {
          param.moduleOption = [{ opKey: "", opValue: "" }];
        }
        this.selectActive = param.timeStamp;
        this.formDefinedVO.push(param);
        this.selectIndex = this.formDefinedVO.length - 1;

        this.rightForm = JSON.parse(JSON.stringify(param));
      }else{
        that.$message({ type: "warning", message: item.moduleAttributeName+"已添加上限！！！"});
      }
    },
    /**@fun 详情接口 */
    getTemplate() {
      let param = {
        formCode: this.$route.query.formCode,
      };
      apiTemplate(param).then((res) => {
        let data = res.data.data;
        this.data = JSON.parse(JSON.stringify(data));
        delete this.data.moduleVO;
        delete this.data.formDefinedVO;

        /** @desc 左侧表单 */
        this.moduleVO = [{ children: [] }, { children: [] }];
        data.moduleVO.forEach((item) => {
          if (item.moduleType === 0) {
            // moduleType	组件类型(0基础组件 1金额组件)	integer
            // moduleTypeName	组件类型名称
            this.moduleVO[0].moduleType = item.moduleType;
            this.moduleVO[0].moduleTypeName = item.moduleTypeName;

            this.moduleVO[0].children.push(item);
          } else if (item.moduleType === 1) {
            this.moduleVO[1].moduleType = item.moduleType;
            this.moduleVO[1].moduleTypeName = item.moduleTypeName;

            this.moduleVO[1].children.push(item);
          }
        });

        /** @desc 右侧表单 */
        this.formDefinedVO = data.formDefinedVO.map((item) => {
          let objItem = {
            timeStamp: item.elementId,
            moduleKey: item.moduleKey,
            moduleTips: item.moduleTips,
            ...item,
          };
          if (objItem.textType || objItem.textType === 0) {
            objItem.textType = objItem.textType + "";
          }
          return objItem;
        });
        this.$forceUpdate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-input-number--mini {
  width: 100%;
}
/deep/ .el-input-number .el-input__inner {
  text-align: left;
}
/deep/ .el-select {
  width: 100%;
}
/deep/ .w-e-text-container{
  height: 500px !important;
}

.optionItemIcon {
  position: absolute;
  right: -5px;
  top: -12px;
  cursor: pointer;
  font-size: 20px;
}
.optionItem {
  padding: 10px;
  box-shadow: 0px 0px 9px 0px rgba(48, 48, 48, 0.1);
  border-radius: 6px;
  margin: 0 5px 20px;
  position: relative;
  .optionItemTop {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    .optionItemIndex {
      background-color: #007aff;
      color: #fff;
      display: inline-block;
      border-radius: 6px;
      font-size: 16px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;
    }
  }

  .moenyItem {
    display: flex;
    align-items: center;
    .moenyItemLeft {
      border: 1px solid #007aff;
      width: 66px;
      height: 40px;
      text-align: center;
      padding: 4px;
      border-radius: 4px;
      box-sizing: border-box;
      overflow: hidden;
      font-size: 16px;
    }
    .moenyItemRight {
      .itemRightBox {
        display: flex;
        .itemName {
          width: 70px;
          padding: 0 10px;
        }
      }
    }
  }
}
.optionAdd {
  width: 100px;
  display: flex;
  justify-content: space-evenly;
}
/*拖拽选中样式*/
.chosen {
  border: dashed 1px #3089dc !important;
}
/*被拖拽对象的样式*/
.item {
  background-color: #fdfdfd;
  // border: 1px dashed #eee;
  margin-bottom: 20px;
  // cursor: move;
  cursor: pointer;
  border-radius: 6px;
  padding: 10px;
  padding-right: 16px;
  position: relative;
}
.selectClose {
  position: absolute;
  right: -9px;
  top: -12px;
  background-color: #f4f6fc;
  border-radius: 50%;
  font-size: 20px;
}

.selectActive {
  border: dashed 1px #3089dc;
}

.item-tem {
  min-height: 18px;
  font-size: 16px;
  display: flex;
  .item-lab {
    // display: inline-block;
    width: 120px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .item-tip {
    // display: inline-block;
    width: 215px;
    color: #a5a6a7;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

.xieYiBox {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  .radioIcon {
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 4px solid #3089dc;
    margin-right: 6px;
  }
}

/*公共样式*/
.flex-ac {
  display: flex;
  align-items: center;
}
.flex-jc {
  display: flex;
  justify-content: center;
}
.flex-sb {
  display: flex;
  justify-content: space-between;
}
.flex-se {
  display: flex;
  justify-content: space-evenly;
}

.leftIcon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
// /deep/ .el-button--mini,
// .el-button--mini.is-round {
//   padding: 6px 12px;
// }
.avue-view {
  padding: 0 !important;
}
.el-scrollbar {
  height: 100%;
}
// .avue-main{
//   bottom: 10px !important;
//   top: 0 !important;
// }

/*左侧组件样式*/
.boxLeft {
  min-width: 240px;
  // height: 800px;
  background-color: #fff;
  padding: 20px;
  border-radius: 0 10px 10px 0;
  box-sizing: border-box;

  .leftWrap {
    .leftText {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 10px;
    }
    .leftText:before {
      content: "|";
      display: inline-block;
      height: 100%;
      position: relative;
      top: -2px;
      color: #409eff;
    }
  }
}

.leftTempaletWrap {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
}

.leftTempalet {
  // min-width: 48%;
  border: 1px solid #f4f6fc;
  background-color: #f4f6fc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // justify-content: center;
  // flex-direction: column;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  // box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.1);
}

.leftTempalet:hover {
  border: 1px solid #409eff;
  color: #409eff;
}

@media only screen and (max-width: 768px) {
  /* For desktop: */
  .leftTempalet {
    width: 100%;
  }
}

/*中间样式*/
.boxConten {
  width: 100%;
  // height: 800px;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  // overflow: hidden;
  box-sizing: border-box;
  .conten-box {
    // overflow: scroll;
    // height: 800px;
    min-width: 375px;
    background-color: #eff2f6;
    box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.15);
    padding: 0;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 20px 0;
    position: relative;
    .navTop {
      box-sizing: border-box;
      padding: 10px;
      height: 40px;
      background-color: #fff;
      border-radius: 10px 10px 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .conten-footer {
      position: absolute;
      top: 50px;
      bottom: 60px;
      left: 0;
      right: 0;
      padding: 10px;
      // height: 710px;
      overflow-y: scroll;
      box-sizing: border-box;
    }
    .conten-footer::-webkit-scrollbar {
      display: none;
    }

    .conten-footer-btn {
      position: absolute;
      bottom: 0px;
      left: 0;
      right: 0;
      z-index: 9999;
      height: 60px;

      display: flex;
      justify-content: center;
      align-content: center;
      
      padding: 10px;
      box-sizing: border-box;
      background: #eff2f6;
    }
  }
}
/*右侧属性样式*/
.boxRight {
  min-width: 450px;
  max-width: 450px;
  // height: 800px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px 0 0 10px;
  box-sizing: border-box;

  .boxRightTop {
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .rightTopTit {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .getTips{
    font-size: 14px;
    padding-bottom: 10px;
    color: #007aff;
  }
  .rightTopForm {
    height: calc(100% - 50px);
    box-sizing: border-box;
    overflow: scroll;
    padding-right: 6px;
  }
}

/deep/ .el-form-item {
  margin-bottom: 16px;
}
/deep/ .el-form-item__label {
  line-height: normal;
  padding: 0 0 8px;
  font-weight: bold;
}
/deep/ .moduleTipszdz {
  padding: 0 6px;
}
</style>